<template>
  <div class="page-content">
    <el-row class="Sidebar-content">
      <el-col class="Sidebar-left" ref="SideRef">
        <el-menu class="el-menu-vertical-demo">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <Menu />
              </el-icon>
              <span>工作台</span>
            </template>
            <el-menu-item @click="to('workbar')"> 工作台 </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>资料管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="to('file/floor')">
                楼座管理
              </el-menu-item>
              <el-menu-item index="2-2" @click="to('file/house')">
                房屋管理
              </el-menu-item>
              <el-menu-item index="2-3" @click="to('file/storage')">
                储物室管理
              </el-menu-item>
              <el-menu-item index="2-4" @click="to('file/household')">
                住户管理
              </el-menu-item>
              <el-menu-item index="2-5" @click="to('file/houserent')">
                房屋租赁管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Van />
              </el-icon>
              <span>车行管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1" @click="to('car/region')">
                区域管理
              </el-menu-item>
              <el-menu-item index="3-2" @click="to('car/position')">
                车位管理
              </el-menu-item>
              <el-menu-item index="3-3" @click="to('car/car')">
                车辆管理
              </el-menu-item>
              <el-menu-item index="3-4" @click="to('car/payment')">
                停车缴费管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon>
                <List />
              </el-icon>
              <span>物业服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1" @click="to('tenement/repair')">
                报修管理
              </el-menu-item>
              <el-menu-item index="4-2" @click="to('tenement/activity')">
                活动管理
              </el-menu-item>
              <el-menu-item index="4-3" @click="to('tenement/announce')">
                公告管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Tickets />
              </el-icon>
              <span>缴费管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1" @click="to('payment/bill')">
                账单管理
              </el-menu-item>
              <el-menu-item index="5-2" @click="to('payment/payItems')">
                收费项目管理
              </el-menu-item>
              <el-menu-item index="5-3" @click="to('payment/instrument')">
                仪表管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <Stopwatch />
              </el-icon>
              <span>巡更巡检</span>
            </template>
            <el-menu-item-group>
              <!-- <el-menu-item index="6-1" @click="to('patrol/records')">
                巡更记录
              </el-menu-item> -->
              <el-menu-item index="6-2" @click="to('patrol/task')">
                巡更任务管理
              </el-menu-item>
              <el-menu-item index="6-3" @click="to('patrol/plan')">
                巡更计划管理
              </el-menu-item>
              <el-menu-item index="6-4" @click="to('patrol/point')">
                巡更点管理
              </el-menu-item>
              <el-menu-item index="6-5" @click="to('patrol/path')">
                巡更路线管理
              </el-menu-item>
              <el-menu-item index="6-6" @click="to('patrol/project')">
                巡更项目管理
              </el-menu-item>
              <el-menu-item index="6-7" @click="to('patrol/daily')">
                巡更日报
              </el-menu-item>
              <el-menu-item index="6-8" @click="to('patrol/weekly')">
                巡更周报
              </el-menu-item>
              <el-menu-item index="6-9" @click="to('patrol/monthly')">
                巡更月报
              </el-menu-item>
              <el-menu-item index="6-10" @click="to('patrol/business')">
                巡更业务统计
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="7">
            <template #title>
              <el-icon>
                <Operation />
              </el-icon>
              <span>设备管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="7-1" @click="to('equipment/public')">
                公共设备管理
              </el-menu-item>
              <el-menu-item index="7-2" @click="to('equipment/classify')">
                设备分类管理
              </el-menu-item>
              <el-menu-item index="7-3" @click="to('equipment/repair')">
                设备维修管理
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="8">
            <template #title>
              <el-icon>
                <Setting />
              </el-icon>
              <span>设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="8-1" @click="to('setting/householdLabel')">
                住户标签
              </el-menu-item>
              <el-menu-item index="8-2" @click="to('setting/houseFacility')">
                房屋设施管理
              </el-menu-item>
              <el-menu-item index="8-3" @click="to('setting/employee')">
                员工管理
              </el-menu-item>
              <el-menu-item index="8-4" @click="to('setting/character')">
                角色名称
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
    <div class="main-content">
      <div class="content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Menu,
  Folder,
  Van,
  List,
  Tickets,
  Stopwatch,
  Operation,
  Setting,
} from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import to from "@/utils/to.js";

//默认加载工作台
onMounted(() => {});
</script>

<style lang="less" scoped>
.page-content {
  display: flex;
  flex-direction: row;
  .Sidebar-content {
    flex-basis: 20rem;
    height: 94.6vh;
    overflow-y: scroll;
    overflow-x: hidden;
    position: fixed;
    background-color: white;
    .Sidebar-left {
      ::v-deep .el-menu-vertical-demo {
        width: 20rem;
        height: 16rem;
      }
    }
  }
  .main-content {
    flex-grow: 1;
    min-height: 100vh;
    height: 100%;
    background-color: rgb(229, 232, 233);
  }
}

.content {
  width: 78%;
  height: auto;
  margin-left: 20%;
}
</style>
